<route lang="json5" type="page">
{
  type: 'page',
  needLogin: true,
  style: {
    navigationBarTitleText: '消息中心',
    navigationBarBackgroundColor: '#FFFFFF',
    navigationStyle: 'custom', 
  }
}
</route>
<template>
  <!-- 导航栏 -->
  <wd-navbar custom-class="custom-navbar">
    <template #left>
      <view class="flex">
        <wd-img width="52rpx" height="52rpx" src="/static/icon/icon10.svg" />
        <view class="text-sm font-semibold ml-3">消息中心</view>
      </view>
    </template>
  </wd-navbar>
  <view class="px-4" v-for="(item, index) in 10" :key="index">
    <view class="flex items-center py-4">
      <wd-img v-if="index === 0" width="88rpx" height="88rpx" src="/static/icon/icon11.svg" />
      <wd-img v-else width="88rpx" height="88rpx" src="/static/icon/icon12.svg" />
      <view class="flex-1 ml-3">
        <view class="flex">
          <text class="text-sm font-semibold flex-1">事件消息</text>
          <text class="text-xs text-gray">13:40</text>
        </view>
        <view class="text-xs text-gray mt-1">您有一个新的事件待处理</view>
      </view>
    </view>
    <view class="custom-drivider"></view>
  </view>
</template>

<script lang="ts" setup>
</script>
<style lang="scss">
page {
  background: #fff;
  padding-top: 88rpx;
  /* #ifdef H5 */
  padding-bottom: 180rpx;
  min-height: calc(100vh - 180rpx);
  /* #endif */
}
$navbar-height: 88rpx;
:deep(.custom-navbar.wd-navbar) {
  background: transparent;
  height: $navbar-height !important;
  line-height: $navbar-height;
  &::after {
    height: 0 !important;
  }
}
.custom-drivider{
  height: 1rpx;
  margin: 0;
  background: #e5e5e5;
}
</style>
